<template>
	<view class="addbox">
		<view class="bg-white px30">
			<view class="py30 bor-bot">
				<view>回收箱主图：</view>
				<view class=" mt30">
					<scroll-view scroll-x="true" class="pic-list">
						<view class="uploading" @click.stop="uploadpiconly" v-if="image">
							<image class="imgwh" :src="image" mode=""></image>
						</view>
						<!-- <view class="uploading" v-else @click.stop="uploadpiconly">
							<image class="imgwh" src="https://airecoveryproject.oss-cn-hangzhou.aliyuncs.com/serve-app/uploading.png" mode=""></image>
						</view> -->
					</scroll-view>
				</view>
			</view>
			<view class="py30 bor-bot">
				<view>回收箱图片：</view>
				<view class=" mt30">
					<scroll-view scroll-x="true" class="pic-list">
						<view class="uploading" v-for="(item,index) in piclist" :key="index">
							<image class="imgwh" :src="item" mode=""></image>
							<image @click="del(index)" class="cancel" src="https://airecoveryproject.oss-cn-hangzhou.aliyuncs.com/serve-app/login03.png" mode="aspectFit"></image>
						</view>
						<!-- <view class="uploading" v-if="piclist.length<9" @click.stop="uploadpic">
							<image class="imgwh" src="https://airecoveryproject.oss-cn-hangzhou.aliyuncs.com/serve-app/uploading.png" mode=""></image>
						</view> -->
					</scroll-view>
				</view>
			</view>
			<view class="py30 bor-bot acea-row row-between-wrapper">
				<view>回收箱名字：</view>
				<input disabled v-model="name" class="text-right" type="text" placeholder="请输入名字" placeholder-class="color999 fs-26">
			</view>
			<view class="py30 bor-bot acea-row row-between-wrapper">
				<view>回收箱阈值：</view>
				<input disabled v-model="capacity_max" class="text-right" type="text" placeholder="回收箱阈值" placeholder-class="color999 fs-26">
			</view>
			<view class="py30 bor-bot acea-row row-between-wrapper">
				<view>回收箱编号：</view>
				<input disabled v-model="number" class="text-right" type="text" placeholder="回收箱编" placeholder-class="color999 fs-26">
			</view>
			<view class="py30 bor-bot acea-row row-between-wrapper">
				<view>回收箱地址：</view>
				<input disabled v-model="address" class="text-right" type="text" placeholder="回收箱地址" placeholder-class="color999 fs-26">
			</view>
			<view class="py30">
				<view>地址备注：</view>
				<textarea disabled v-model="mark" class="textarea mt20" placeholder="请填写" placeholder-class="color999 fs-26"></textarea>
			</view>
		</view>
		
		<view class="submit" @click="submit">清箱提报</view>
		
<!-- 		<view class="acea-row row-center-wrapper">
			<image class="add-box" src="https://airecoveryproject.oss-cn-hangzhou.aliyuncs.com/serve-app/add-box.png" mode="aspectFit"></image>
		</view> -->
		
	</view>
</template>

<script>
	import{
		savebox,
		boxinfo,
		clearbox
	} from '@/api/news.js'
	export default {
		data() {
			return {
				id:0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 22.790667,
				longitude: 108.528337,
				scale:20,
				covers: [
					{
						latitude: 22.790667,
						longitude: 108.528337,
						iconPath: '../../../static/location.png'
					}
				],
				timer:null,
				piclist:[],
				address:'',
				name:'',
				number:'',
				capacity_max:'',
				mark:'',
				boxid:'',
				details:{},
				image:'',
			};
		},
		onLoad(option) {
			this.boxid = option.id;
			this.getdetail();
		},
		methods:{
			getdetail(){
				let that = this;
				boxinfo(this.boxid).then(res=>{
					let details = res.data;
					that.details = details;
					that.name = details.name;
					that.address = details.address;
					that.number = details.number;
					that.mark = details.mark;
					that.capacity_max = details.capacity_max;
					that.image = details.image;
					that.piclist = details.images
				})
			},
			del(index){
				this.piclist.splice(index,1)
			},
			submit(){
				let that = this;
				uni.showModal({
					title: '提示',
					content: '是否清空此回收箱？',
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
							clearbox({ id : that.boxid }).then(res=>{
								that.$util.Tips({ title : res.msg })
							}).catch(err=>{
								that.$util.Tips({ title : err })
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			uploadpiconly(){
				let that = this;
				that.$util.uploadImageChange('upload/image', (res) => {
					that.image = res.data.url;
				});
			},
			uploadpic: function() {
				let that = this;
				that.$util.uploadImageChange('upload/image', (res) => {
					that.piclist.push(res.data.url)
				});
			},



		},

	}
</script>

<style lang="scss">
	.addbox{
		
		.map{
			width: 100%;
			height: 550rpx;
			background-color: #eeeeee;
		}
		
		input{
			width: 500rpx;
		}
		
		.btn{
			width: 260rpx;
			height: 60rpx;
			background: rgba(10, 208, 140, 0.2);
			border-radius: 30rpx;
			text-align: center;
			line-height: 60rpx;
			color: #0AD08C;
			font-size: 30rpx;
		}
		
		.submit{
			background: #F75700;
			width: 690rpx;
			line-height: 100rpx;
			border-radius: 50rpx;
			text-align: center;
			margin: 50rpx auto;
			color: #ffffff;
			font-size: 32rpx;
		}
		
		.add-box{
			width: 215rpx;
			height: 84rpx;
			margin: 50rpx auto;
		}
		
		.pic-list{
			width: 100%;
			white-space: nowrap;
		}
		
		.uploading{
			width: 120rpx;
			height: 120rpx;
			display: inline-block;
			margin-right: 20rpx;
			position: relative;
			
			.cancel{
				width: 30rpx;
				height: 30rpx;
				position: absolute;
				top: 0;
				right: 0;
				z-index: 999;
			}
		}
		
		.textarea{
			width: 690rpx;
			height: 150rpx;
			background-color: #E4E4E4;
			border-radius: 8rpx;
			padding: 20rpx;
		}
		
	}
</style>
